<template>
    <div class="createresume">
        <div>
            <h3>创建简历</h3>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="简历名称" prop="resumename">
                    <el-input placeholder="简历名称" v-model="ruleForm.resumename" style="width: 200px;"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="resumeusername">
                    <el-input placeholder="姓名" v-model="ruleForm.resumeusername" style="width: 200px;"></el-input>
                </el-form-item>
                    <el-form-item label="性别" prop="resumesex">
                        <el-select v-model="ruleForm.resumesex" clearable placeholder="请选择" style="width: 200px;">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="出生年月" prop="resumedate">
                        <el-date-picker
                                v-model="ruleForm.resumedate"
                                type="date"
                                placeholder="选择日期"
                                style="width: 200px;">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="现居住地" prop="resumelive">
                        <el-select v-model="ruleForm.resumelive" placeholder="选择地址" style="width: 200px;">
                            <el-option-group
                                    v-for="group in options2"
                                    :key="group.label"
                                    :label="group.label">
                                <el-option
                                        v-for="item in group.options2"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-option-group>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="学历" prop="resumeeducation">
                        <el-select v-model="ruleForm.resumeeducation" clearable placeholder="请选择" style="width: 200px;">
                            <el-option
                                    v-for="item in options3"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="工作经验" prop="resumeexpr">
                        <el-select v-model="ruleForm.resumeexpr" clearable placeholder="请选择" style="width: 200px;">
                            <el-option
                                    v-for="item in options4"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                <el-form-item label="手机" prop="resumephone">
                    <el-input placeholder="手机" v-model="ruleForm.resumephone" style="width: 200px;"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="resumeemail">
                    <el-input placeholder="邮箱" v-model="ruleForm.resumeemail" style="width: 200px;"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'createresume',
        data() {
            return {
                ruleForm: {
                    resumename: '',
                    resumeusername: '',
                    resumesex: '',
                    resumedate: '',
                    resumelive: '',
                    resumeeducation: '',
                    resumeexpr: '',
                    resumephone: '',
                    resumeemail: '',
                },
                rules: {
                    resumename: [
                        {required: true, message: '请输入简历名称', trigger: 'blur'},
                        {message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                    resumeusername: [
                        {required: true, message: '请输入姓名', trigger: 'blur'},
                        {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                    resumesex: [
                        {required: true, message: '请选择性别', trigger: 'blur'}
                    ],
                    resumedate: [
                        {type: 'date', required: true, message: '请选择日期', trigger: 'change'}
                    ],
                    resumelive: [
                        {required: true, message: '请选择地址', trigger: 'blur'}
                    ],
                    resumeeducation: [
                        {required: true, message: '请选择学历', trigger: 'blur'}
                    ],
                    resumeexpr: [
                        {required: true, message: '请选择工作经验', trigger: 'blur'}
                    ],
                    resumeemail: [
                        {required: true, message: '请输入邮箱地址', trigger: 'blur'},
                        {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
                    ],
                    resumephone: [
                        {required: true, message: '请输入手机号码', trigger: 'blur'},
                        {type: 'number', message: '请输入正确的手机号码', trigger: ['blur', 'change']}
                    ],
                },
                options: [{
                    value: 'male',
                    label: '男'
                }, {
                    value: 'female',
                    label: '女'
                }],
                value: '',

                options2: [{
                    label: '热门城市',
                    options2: [{
                        value: 'Shanghai',
                        label: '上海'
                    }, {
                        value: 'Beijing',
                        label: '北京'
                    }]
                }, {
                    label: '城市名',
                    options2: [{
                        value: 'Chengdu',
                        label: '成都'
                    }, {
                        value: 'Shenzhen',
                        label: '深圳'
                    }, {
                        value: 'Guangzhou',
                        label: '广州'
                    }, {
                        value: 'Dalian',
                        label: '大连'
                    }]
                }],
                value2: '',

                options3: [{
                    value: '1',
                    label: '初中'
                }, {
                    value: '2',
                    label: '高中'
                }, {
                    value: '3',
                    label: '中技'
                }, {
                    value: '4',
                    label: '大专'
                }, {
                    value: '5',
                    label: '本科',
                }, {
                    value: '6',
                    label: '硕士',
                }, {
                    value: '7',
                    label: '博士',
                }, {
                    value: '8',
                    label: '博后',
                }],
                value3: '',

                options4: [{
                    value: 'oneyear',
                    label: '1年'
                }, {
                    value: 'underoneyear',
                    label: '1年以下'
                }, {
                    value: 'onetothree',
                    label: '1-3年'
                }, {
                    value: 'threetofive',
                    label: '3-5年'
                }, {
                    value: 'fivetoten',
                    label: '5-10年',
                }, {
                    value: 'overten',
                    label: '10年以上',
                }],
                value4: '',
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        return false;
                    }
                });
            }
            ,
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }

    }
</script>
<style scoped>
    .createresume {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
</style>
